﻿<%@ Page Title="Schedule Shifts - Delonix Regia" Language="C#" MasterPageFile="~/default.Master" AutoEventWireup="true" CodeBehind="ScheduleShift.aspx.cs" Inherits="DelonixRegia.ScheduleShift"%>

<asp:Content ID="Content4" ContentPlaceHolderID="cphPageTitle" runat="server">
    Schedule Shift - Delonix Regia
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="cphTitle" runat="server">
    Schedule Shift
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphSubtitle" runat="server">
    Schedule Shift for Staff in Delonix Regia
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="cphMain" runat="server">
    <div class="panel panel-default" style="width: 850px; margin: 0 auto;">
        <div class="panel-heading">Schedule Shift</div>

        <div class="panel-body">
            <div class="alert alert-danger" id="errorBox" style="display:none;">
            </div>
            <div class="alert alert-success" id="successBox" style="display: none;">
            </div>

            <table class="nav-justified">
                <tr>
                    <td>
                        <table style="width:350px;margin:auto;" class="nav-justified">
                            <tr>
                                <td class="text-left" style="width: auto">Start Date:</td>
                                <td style="width: 15px">&nbsp;</td>
                                <td>  
                                    <asp:TextBox ID="tbxStartDate" runat="server" CssClass="form-control" Width="187px" MaxLength="11"></asp:TextBox>  
                                    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
                                    <ajaxToolkit:CalendarExtender ID="ceStartDate" TargetControlID="tbxStartDate" runat="server" Format="dd-MM-yyyy"></ajaxToolkit:CalendarExtender>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left" style="width: auto">Start Time:</td>
                                <td style="width: 15px">&nbsp;</td>
                                <td>
                                     <asp:DropDownList ID="ddlStartTime" runat="server" CssClass="form-control" Width="187px">
                                         <asp:ListItem Selected="True" Value="00:00:00">00:00:00</asp:ListItem>
                                         <asp:ListItem>01:00:00</asp:ListItem>
                                         <asp:ListItem>02:00:00</asp:ListItem>
                                         <asp:ListItem>03:00:00</asp:ListItem>
                                         <asp:ListItem>04:00:00</asp:ListItem>
                                         <asp:ListItem>05:00:00</asp:ListItem>
                                         <asp:ListItem>06:00:00</asp:ListItem>
                                         <asp:ListItem>07:00:00</asp:ListItem>
                                         <asp:ListItem>08:00:00</asp:ListItem>
                                         <asp:ListItem>09:00:00</asp:ListItem>
                                         <asp:ListItem>10:00:00</asp:ListItem>
                                         <asp:ListItem>11:00:00</asp:ListItem>
                                         <asp:ListItem>12:00:00</asp:ListItem>
                                         <asp:ListItem>13:00:00</asp:ListItem>
                                         <asp:ListItem>14:00:00</asp:ListItem>
                                         <asp:ListItem>15:00:00</asp:ListItem>
                                         <asp:ListItem>16:00:00</asp:ListItem>
                                         <asp:ListItem>17:00:00</asp:ListItem>
                                         <asp:ListItem>18:00:00</asp:ListItem>
                                         <asp:ListItem>19:00:00</asp:ListItem>
                                         <asp:ListItem>20:00:00</asp:ListItem>
                                         <asp:ListItem>21:00:00</asp:ListItem>
                                         <asp:ListItem>22:00:00</asp:ListItem>
                                         <asp:ListItem>23:00:00</asp:ListItem>
                                     </asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left" style="width: auto">End Date:</td>
                                <td style="width: 15px">&nbsp;</td>
                                <td>  
                                    <asp:TextBox ID="tbxEndDate" runat="server" CssClass="form-control" Width="187px" MaxLength="11"></asp:TextBox>  
                                    <ajaxToolkit:CalendarExtender ID="ceEndDate" TargetControlID="tbxEndDate" runat="server" Format="dd-MM-yyyy"></ajaxToolkit:CalendarExtender>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left" style="width: auto">End Time:</td>
                                <td style="width: 15px">&nbsp;</td>
                                <td>
                                     <asp:DropDownList ID="ddlEndTime" runat="server" CssClass="form-control" Width="187px">
                                         <asp:ListItem Selected="True" Value="00:00:00">00:00:00</asp:ListItem>
                                         <asp:ListItem>01:00:00</asp:ListItem>
                                         <asp:ListItem>02:00:00</asp:ListItem>
                                         <asp:ListItem>03:00:00</asp:ListItem>
                                         <asp:ListItem>04:00:00</asp:ListItem>
                                         <asp:ListItem>05:00:00</asp:ListItem>
                                         <asp:ListItem>06:00:00</asp:ListItem>
                                         <asp:ListItem>07:00:00</asp:ListItem>
                                         <asp:ListItem>08:00:00</asp:ListItem>
                                         <asp:ListItem>09:00:00</asp:ListItem>
                                         <asp:ListItem>10:00:00</asp:ListItem>
                                         <asp:ListItem>11:00:00</asp:ListItem>
                                         <asp:ListItem>12:00:00</asp:ListItem>
                                         <asp:ListItem>13:00:00</asp:ListItem>
                                         <asp:ListItem>14:00:00</asp:ListItem>
                                         <asp:ListItem>15:00:00</asp:ListItem>
                                         <asp:ListItem>16:00:00</asp:ListItem>
                                         <asp:ListItem>17:00:00</asp:ListItem>
                                         <asp:ListItem>18:00:00</asp:ListItem>
                                         <asp:ListItem>19:00:00</asp:ListItem>
                                         <asp:ListItem>20:00:00</asp:ListItem>
                                         <asp:ListItem>21:00:00</asp:ListItem>
                                         <asp:ListItem>22:00:00</asp:ListItem>
                                         <asp:ListItem>23:00:00</asp:ListItem>
                                     </asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left" style="width: auto">Staff Name:</td>
                                <td style="width: 15px">&nbsp;</td>
                                <td>
                                     <asp:DropDownList ID="ddlStaffName" runat="server" CssClass="form-control" Width="187px" DataSourceID="SqlDataSource1" DataTextField="firstName" DataValueField="staffID" AutoPostBack="True" OnSelectedIndexChanged="ddlStaffName_SelectedIndexChanged">
                                     </asp:DropDownList>
                                     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DelonixRegiaConnectionString %>" SelectCommand="SELECT [staffID], [firstName] FROM [Staff]"></asp:SqlDataSource>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left" style="width: auto">Duty Type:</td>
                                <td style="width: 15px">&nbsp;</td>
                                <td>
                                     <asp:TextBox ID="tbxDutyType" runat="server" CssClass="form-control" Width="187px" MaxLength="11" ReadOnly="True"></asp:TextBox> 
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="text-right" style="color: gray;"><hr /></td>
                </tr>
                <tr>
                    <td class="text-right" style="text-align:center;">
                        <asp:Button ID="btnCreateShift" runat="server" Text="Create New Shift" CssClass="btn btn-default btn-lg" OnClick="btnCreateShift_Click"/>
                        <ajaxToolkit:ConfirmButtonExtender ID="btnCreateShift_ConfirmButtonExtender" runat="server" ConfirmText="Are you sure you want to create new shift?" Enabled="True" TargetControlID="btnCreateShift"></ajaxToolkit:ConfirmButtonExtender>
                    </td>
                </tr>
                </table>
        </div>
    </div>

    <script type="text/javascript">

        $('#cphMain_tbxStartDate').change(errorBoxHide);
        $('#cphMain_ddlStartTime').change(errorBoxHide);
        $('#cphMain_tbxEndDate').change(errorBoxHide);
        $('#cphMain_ddlEndTime').change(errorBoxHide);
        $('#cphMain_ddlStaffName').change(errorBoxHide);

        function errorBoxHide() {
            $('#errorBox').hide();
            $('#successBox').hide();
        }

        $('#cphMain_tbxStartDate').change(DateTimeValidator);
        $('#cphMain_tbxEndDate').change(DateTimeValidator);
        $('#cphMain_ddlStartTime').change(DateTimeValidator);
        $('#cphMain_ddlEndTime').change(DateTimeValidator);

        function DateTimeValidator() {
            var StartDate = $('#cphMain_tbxStartDate').val();
            var EndDate = $('#cphMain_tbxEndDate').val();
            var StartTime = $('#cphMain_ddlStartTime').val();
            var EndTime = $('#cphMain_ddlEndTime').val();
            var todayDate = $.datepicker.formatDate('dd-MM-yyyy', new Date());

            if ((StartDate.length > 1) && (EndDate.length > 1) && (StartDate > todayDate)) {
                if ((StartDate.length > 1) && (EndDate.length > 1) && (StartDate > EndDate)) {
                    $('#errorBox').html('<strong>Error:</strong> Start date cannot be occur after the end date!');
                    $('#errorBox').hide().show();
                }
                else if ((StartDate.length > 1) && (EndDate.length > 1) && (StartDate == EndDate)) {
                    if (StartTime > EndTime) {
                        $('#errorBox').html('<strong>Error:</strong> Start time cannot be occur after the end time!');
                        $('#errorBox').hide().show();
                    }
                    else if (StartTime == EndTime) {
                        $('#errorBox').html('<strong>Error:</strong> Start time cannot be the same with end time!');
                        $('#errorBox').hide().show();
                    }
                }
            }
            else if ((StartDate.length > 1) && (EndDate.length > 1) && (StartDate <= todayDate)) {
                $('#errorBox').html('<strong>Error:</strong> Start date must be after today\'s date at least!');
                $('#errorBox').hide().show();
            }
        }

    </script>
</asp:Content>
